<template>
    <page-box>
        <template v-slot:header>
            <ask-breadcrumb>
                <template
                    v-for="(item, index) in $getBreadCrumbsName($route.path)"
                >
                    <ask-breadcrumb-item
                        :key="index"
                        v-if="item.path"
                        :to="'/' + item.path"
                        >{{ item.meta.title }}</ask-breadcrumb-item
                    >
                    <ask-breadcrumb-item :key="index" v-else>{{
                        item.meta.title
                    }}</ask-breadcrumb-item>
                </template>
            </ask-breadcrumb>
        </template>
        <div class="handle" :class="{ close: !layout }">
            <el-tabs
                type="border-card"
                :class="{ fold: !layout }"
                @tab-click="layout = true"
                v-model="tabModle"
            >
                <el-tab-pane label="资源类型" name="typeTree">
                    <el-tree
                        ref="tree"
                        node-key="id"
                        :current-node-key="typeId"
                        :data="typeData"
                        :props="props"
                        :default-expand-all="true"
                        :default-checked-keys="setCurrentKey"
                        :key="treeKey"
                    >
                        <span
                            class="custom-tree-node"
                            slot-scope="{ node, data }"
                        >
                            <div
                                :class="{ is_active: data.isActive }"
                                @click="nodeClick(node, data)"
                            >
                                <div>
                                    <img
                                        v-if="data.icon"
                                        :src="$staticUrl + '/' + data.icon"
                                        alt=""
                                    />
                                    <span
                                        >{{ data.name }}({{ data.count }})</span
                                    >
                                </div>
                                <span
                                    v-if="node.level === 2"
                                    :class="
                                        data.isActive === true
                                            ? 'active'
                                            : 'defult'
                                    "
                                ></span>
                            </div>
                        </span>
                    </el-tree>
                </el-tab-pane>
                <el-tab-pane
                    name="typeData"
                    :disabled="showLayer !== '3' || checkList.length === 0"
                >
                    <span slot="label"
                        ><font class="type">资源列表</font
                        >{{
                            activeNames.includes("1")
                                ? "可见资源共"
                                : "本类资源共"
                        }}<i class="num" :title="sumTotal">{{
                            checkList.length > 0
                                ? activeNames.includes("1")
                                    ? String(sumTotal).length > 4
                                        ? String(sumTotal).substr(0, 4) + "..."
                                        : String(sumTotal)
                                    : String(LikeDataList.total).length > 4
                                    ? String(LikeDataList.total).substr(0, 4) +
                                      "..."
                                    : String(LikeDataList.total)
                                : 0
                        }}</i
                        >条
                        <i
                            v-if="activeNames.includes('2')"
                            class="el-icon-back btn-back"
                            @click="activeNames = ['1']"
                        ></i>
                    </span>
                    <div class="content">
                        <el-collapse v-model="activeNames">
                            <el-collapse-item name="1">
                                <ul class="tab-list">
                                    <li
                                        v-for="(item, index) in tabShowList"
                                        :key="index"
                                        :class="
                                            tabShow === index
                                                ? 'tab-active'
                                                : ''
                                        "
                                    >
                                        <span
                                            @click="clickTabName(item, index)"
                                            >{{ item.name }}</span
                                        >
                                    </li>
                                </ul>
                                <ul class="text">
                                    <li
                                        v-for="(item,
                                        index) in dataList.dataList"
                                        :key="index"
                                        @click="handleJump(item, '1')"
                                    >
                                        <div class="content-right">
                                            <p>
                                                <el-link type="primary">{{
                                                    item.dataMap.field1
                                                        .dataVal ||
                                                        item.dataMap.field1
                                                            .fieldName
                                                }}</el-link>
                                            </p>
                                            <p>
                                                {{
                                                    item.dataMap.field2
                                                        .fieldName
                                                }}:{{
                                                    item.dataMap.field2
                                                        .dataVal || "暂无"
                                                }}
                                            </p>
                                            <p>
                                                {{
                                                    item.dataMap.field3
                                                        .fieldName
                                                }}:{{
                                                    item.dataMap.field3
                                                        .dataVal || "暂无"
                                                }}
                                            </p>
                                            <p>
                                                {{
                                                    item.dataMap.field4
                                                        .fieldName
                                                }}:{{
                                                    item.dataMap.field4
                                                        .dataVal || "暂无"
                                                }}
                                            </p>
                                        </div>
                                    </li>
                                </ul>
                                <el-pagination
                                    v-if="dataList.total > 10"
                                    :page-size="10"
                                    layout="prev, pager, next"
                                    :total="dataList.total"
                                    :current-page="pageNo"
                                    @current-change="handleCurrentChange"
                                >
                                </el-pagination>
                            </el-collapse-item>
                            <el-collapse-item name="2">
                                <ul class="tab-list">
                                    <li
                                        v-for="(item, index) in tabShowList"
                                        :key="index"
                                        :class="
                                            tab2Show === index
                                                ? 'tab-active'
                                                : ''
                                        "
                                    >
                                        <span
                                            @click="
                                                handleclickTabName(item, index)
                                            "
                                            >{{ item.name }}</span
                                        >
                                    </li>
                                </ul>
                                <ul class="text">
                                    <li
                                        v-for="(item,
                                        index) in LikeDataList.dataList"
                                        :key="index"
                                        @click="handleJump(item, '2')"
                                    >
                                        <div class="content-right">
                                            <p>
                                                <el-link type="primary">{{
                                                    item.dataMap.field1
                                                        .dataVal ||
                                                        item.dataMap.field1
                                                            .fieldName
                                                }}</el-link>
                                            </p>
                                            <p>
                                                {{
                                                    item.dataMap.field2
                                                        .fieldName
                                                }}:{{
                                                    item.dataMap.field2
                                                        .dataVal || "暂无"
                                                }}
                                            </p>
                                            <p>
                                                {{
                                                    item.dataMap.field3
                                                        .fieldName
                                                }}:{{
                                                    item.dataMap.field3
                                                        .dataVal || "暂无"
                                                }}
                                            </p>
                                            <p>
                                                {{
                                                    item.dataMap.field4
                                                        .fieldName
                                                }}:{{
                                                    item.dataMap.field4
                                                        .dataVal || "暂无"
                                                }}
                                            </p>
                                        </div>
                                    </li>
                                </ul>
                                <el-pagination
                                    v-if="LikeDataList.total > 10"
                                    layout="prev, pager, next"
                                    :page-size="10"
                                    :current-page.sync="curPage"
                                    :total="LikeDataList.total"
                                    @current-change="handelPageChange"
                                >
                                </el-pagination>
                            </el-collapse-item>
                        </el-collapse>
                    </div>
                </el-tab-pane>
            </el-tabs>
            <div class="btn">
                <i
                    @click="layout = !layout"
                    :class="
                        layout ? 'el-icon-caret-top' : 'el-icon-caret-bottom'
                    "
                ></i>
            </div>
        </div>
        <div id="container" ref="containerRef"></div>
    </page-box>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { State } from "vuex-class";
import { debounce } from "@/utils";

interface Option {
    field: string;
    icon: string;
    id: string;
    name: string;
    parentId: number;
    children: Array<any>;
}

@Component({
    name: "ResourceMap"
})
export default class ResourceMap extends Vue {
    @State(state => state.user.userInfo) userInfo: any;
    masskClick = true;
    layout = true;
    sumTotal = 0;
    typeData: any[] = [];
    props = {
        children: "list",
        label: "name"
    };

    checkList: any[] = [];
    setCurrentKey: any[] = [];
    treeKey = 0;
    dataList: any = {
        total: 0,
        dataList: []
    };

    LikeDataList: any = {
        total: 0,
        dataList: []
    };

    activeNames: any[] = ["1"];

    dataShow: any[] = [];

    value: any[] = [];
    options: Option[] = [];
    currrentField = "";
    typeFieldName = "";
    // 地图实例
    map: any = null;
    markers: any = [];
    // 覆盖物/标记点
    marker: any = null;
    defaultProps: any = { label: "name", value: "field" };
    // 最大纬度
    maxLatitude = "";
    // 最小纬度
    minLatitude = "";
    // 最大经度
    maxLongitude = "";
    // 最小经度
    minLongitude = "";
    // 当前页
    pageNo = 1;
    // 页面显示条数
    pageSize = 10;
    curPage = 1;
    currentPage = 1;
    // 显示的层级
    showLayer = "";
    cityCode = "";
    totalPageData: any[] = [];
    // 资源的二级分类id
    typeId = "";
    title = "";
    iconurl = "";
    // 相同定位当前点击的资源点的坐标
    currentLatitude = "";
    currentLongitude = "";
    tabShowList: any[] = [];
    tabModle = "typeTree";
    tabShow = 0;
    tab2Show = 0;

    get AMap() {
        return this.$store.state.aMap;
    }

    // 根据行政级别判断地图缩放范围
    get setZooms() {
        if (this.userInfo.orgCategoryId === "5") {
            return [10, 20];
        }
        if (this.userInfo.orgCategoryId === "7") {
            return [11, 20];
        }
        if (this.userInfo.orgCategoryId === "9") {
            return [13, 20];
        }
    }

    @Watch("showLayer")
    change(newVal: any, oldVal: any) {
        if (newVal && oldVal && newVal !== oldVal) {
            this.map.remove(this.markers);
            this.markers = [];
        }
    }

    @Watch("treeKey")
    treeChange(val: any) {
        if (val) {
            const list: any[] = [];
            const tabList: any[] = [];
            this.typeData.forEach((item: any) => {
                item.list.forEach((subItem: any) => {
                    if (subItem.isActive) {
                        list.push({ field: subItem.field, typeId: subItem.id });
                        tabList.push({
                            name: subItem.name,
                            field: subItem.field,
                            typeId: subItem.id
                        });
                    }
                });
            });
            this.checkList = list;
            this.tabShowList = tabList;
            this.typeFieldName = tabList[0].name;
        }
    }

    @Watch("checkList", { deep: true })
    checkListChange(newVal: any, oldVal: any) {
        this.map.setZooms([10, 20]);
        if (newVal && oldVal && newVal !== oldVal) {
            this.map.remove(this.markers);
            this.markers = [];
        }
    }

    created() {
        this.cityCode = this.userInfo.cityCode;
        this.setShowLayer();
        this.initPage();
    }

    setShowLayer() {
        if (this.userInfo.orgCategoryId === "5") {
            this.showLayer = "1";
        }
        if (this.userInfo.orgCategoryId === "7") {
            this.showLayer = "2";
        }
        if (this.userInfo.orgCategoryId === "9") {
            this.showLayer = "3";
        }
    }

    // 获取资源分类的
    async getResrouceType() {
        const res = await this.$server["retrieval/getTree"]({ data: {} });
        if (res.data.code === 200) {
            this.typeData = res.data.data;
            this.typeData = this.typeData
                .filter((item: any) => item.children)
                .map((item: any) => {
                    item.children.forEach((subItem: any) => {
                        subItem.isActive = false;
                    });
                    // 添加一个list替换children 使属性结构满足ui页面要求
                    return { ...item, list: item.children };
                });
            this.typeData[0].children[0].isActive = true;
            this.typeId = this.typeData[0].children[0].id;
            this.currrentField = this.typeData[0].children[0].field;
            this.typeFieldName = this.typeData[0].children[0].name;
            this.setCurrentKey = [this.typeData[0].children[0].id];
            this.$nextTick(() => {
                (this.$refs.tree as any).setCurrentKey(this.typeId);
            });
            this.checkListId();
            this.getMapInfo({
                pageTypeId: this.typeId,
                PageTypeField: this.currrentField
            });
        } else {
            this.$message.error(res.data.message || "接口错误");
        }
    }

    // 根据当前登陆权限获取地图中心点
    async getCenterGis() {
        const res = await this.$server["ResourceMap/getCenterGis"]({
            data: { cityCode: this.cityCode }
        });
        if (res.data.code === 200) {
            if (res.data.data.longitude && res.data.data.latitude) {
                return [res.data.data.longitude, res.data.data.latitude];
            } else {
                return null;
            }
        } else {
            return null;
        }
    }

    async initPage() {
        const _aMap = this.AMap || (await this.$store.dispatch("loadAMap"));
        const AMap = _aMap;
        const center: any = await this.getCenterGis();
        this.map = new AMap.Map("container", {
            resizeEnable: true, // 是否监控地图容器尺寸变化,
            center,
            zoom: 10,
            zooms: this.setZooms,
            mapStyle: "amap://styles/whitesmoke"
        });

        this.map.addControl(new AMap.Scale());
        // this.map.on("zoomstart", this.mapZoomstart);
        this.map.on("zoomend", debounce(this.mapZoomend, 1000));
        // this.map.on("movestart", this.mapMovestart);
        this.map.on("moveend", debounce(this.mapMoveend, 1000));
        // 获取最大和最小经纬度
        this.getLatLng();
        this.getResrouceType();
    }

    nodeClick(node: any, data: any) {
        if (node.level === 1) return;
        this.$nextTick(() => {
            data.isActive = !data.isActive;
            this.activeNames = ["1"];
            this.treeKey++;
            this.checkListId();
            this.getMapInfo({
                pageTypeId: this.checkList[0].typeId,
                PageTypeField: this.checkList[0].field
            });
        });
    }

    checkListId() {
        const list: any[] = [];
        const tabList: any[] = [];
        this.typeData.forEach((item: any) => {
            item.list.forEach((subItem: any) => {
                if (subItem.isActive) {
                    list.push({ field: subItem.field, typeId: subItem.id });
                    tabList.push({
                        name: subItem.name,
                        field: subItem.field,
                        typeId: subItem.id
                    });
                }
            });
        });
        this.checkList = list;
        this.tabShowList = tabList;
        return list;
    }

    clickTabName(item: any, index: any) {
        this.typeId = item.typeId;
        this.currrentField = item.field;
        this.typeFieldName = item.name;
        this.pageNo = 1;
        this.tabShow = index;
        this.getMapInfo(
            {
                pageNo: 1,
                pageTypeId: this.typeId,
                PageTypeField: this.currrentField
            },
            "tab"
        );
    }

    handleclickTabName(item: any, index: any) {
        this.typeId = item.typeId;
        this.currrentField = item.field;
        this.typeFieldName = item.name;
        this.tab2Show = index;
        this.handelPageChange(1);
    }

    // 获取视口的最大最小经纬度
    getLatLng() {
        const bounds = this.map.getBounds();
        this.maxLatitude = bounds.northeast.lat.toString();
        this.maxLongitude = bounds.northeast.lng.toString();
        this.minLatitude = bounds.southwest.lat.toString();
        this.minLongitude = bounds.southwest.lng.toString();
    }

    // 地图缩放
    logMapinfo() {
        const zoom = this.map.getZoom(); // 获取当前地图级别
        if (zoom >= 13) {
            this.showLayer = "3";
        }
        if (zoom < 13 && zoom > 10) {
            this.showLayer = "2";
        }
        if (zoom <= 10) {
            this.showLayer = "1";
        }
    }

    handleChangeClick() {
        this.activeNames = ["1"];
    }

    handleCurrentChange(val: any) {
        this.pageNo = val;
        this.getMapInfo(
            {
                pageNo: val,
                pageTypeId: this.typeId,
                PageTypeField: this.currrentField
            },
            "tab"
        );
    }

    async handelPageChange(val: any) {
        this.curPage = val;
        const res = await this.$server["ResourceMap/page"]({
            data: {
                field: this.currrentField,
                latitude: this.currentLatitude,
                longitude: this.currentLongitude,
                pageNo: val,
                pageSize: 10,
                typeId: this.typeId
            },
            loader: false
        });
        if (res.data.code === 200) {
            this.LikeDataList = res.data.data.pageData;
            this.LikeDataList.total = res.data.data.pageData.total;
        }
    }

    // mapZoomstart() {
    //     this.map.setZooms([10, 20]);
    // }

    mapZoomend() {
        this.logMapinfo();
        this.getLatLng();
        this.pageNo = 1;
        this.tabShow = 0;
        this.getMapInfo({
            pageNo: this.pageNo,
            pageTypeId: this.tabShowList[0].typeId,
            PageTypeField: this.tabShowList[0].field
        });
    }

    // 移动事件
    mapMoveend() {
        this.map.remove(this.markers);
        this.markers = [];
        this.pageNo = 1;
        this.getLatLng();
        this.tabShow = 0;
        this.pageNo = 1;
        this.getMapInfo({
            pageNo: this.pageNo,
            pageTypeId: this.tabShowList[0].typeId,
            PageTypeField: this.tabShowList[0].field
        });
    }

    // 初始化点标记
    async initMarker(data: any) {
        const AMap = this.AMap || (await this.$store.dispatch("loadAMap"));
        if (data.areaAndTownViewVoList !== null) {
            data.areaAndTownViewVoList.forEach((item: any) => {
                this.marker = new AMap.Marker({
                    position: [item.longitude, item.latitude],
                    content: `<div class="mark-item"><p>${item.name}</p><p>${item.amount}个</p></div>`,
                    data: item
                });
                this.marker.on("click", (e: any) => {
                    this.map.setCenter([
                        e.target.w.data.longitude,
                        e.target.w.data.latitude
                    ]);
                    const zoom = e.target.w.data.showLayer === 2 ? 11 : 13;
                    this.map.setZoom(zoom);
                    this.tabModle =
                        e.target.w.data.showLayer === 2
                            ? "typeTree"
                            : "typeData";
                    this.showLayer = e.target.w.data.showLayer || "3";
                });
                this.markers.push(this.marker);
            });
        }
        if (
            data.areaAndTownViewVoMapList &&
            data.areaAndTownViewVoMapList.length > 0
        ) {
            data.areaAndTownViewVoMapList.forEach((item: any) => {
                this.marker = new AMap.Marker({
                    position: [item.longitude, item.latitude], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                    content:
                        item.amount > 1
                            ? `<div class="item-info"><span>资源定位:</span><i>${item.amount}</i></div>`
                            : `<div class="mark-img" style=background-color:${item.color}><img src=${this.$staticUrl}/${item.icon}/></div>`,
                    data: item
                });
                this.marker.on("click", (e: any) => {
                    this.activeNames = ["2"];
                    this.tabModle = "typeData";
                    this.$nextTick(async() => {
                        if (e.target.w.data.amount === "1") {
                            this.tab2Show = this.tabShowList.findIndex(
                                (subItem: any) =>
                                    subItem.typeId === e.target.w.data.typeId
                            );
                            this.typeId = this.tabShowList[
                                this.tab2Show
                            ].typeId;
                            this.currrentField = this.tabShowList[
                                this.tab2Show
                            ].field;
                            this.typeFieldName = this.tabShowList[
                                this.tab2Show
                            ].name;
                        } else {
                            this.tab2Show = 0;
                        }
                        this.curPage = 1;
                        this.currentLatitude = e.target.w.data.latitude;
                        this.currentLongitude = e.target.w.data.longitude;
                        const res = await this.$server["ResourceMap/page"]({
                            data: {
                                latitude: e.target.w.data.latitude,
                                longitude: e.target.w.data.longitude,
                                pageNo: 1,
                                pageSize: 10,
                                field:
                                    e.target.w.data.amount === "1"
                                        ? this.currrentField
                                        : this.tabShowList[0].field,
                                typeId:
                                    e.target.w.data.amount === "1"
                                        ? this.typeId
                                        : this.tabShowList[0].typeId
                            }
                        });
                        if (res.data.code === 200) {
                            this.LikeDataList = res.data.data.pageData;
                        }
                    });
                });
                this.markers.push(this.marker);
            });
        }
        this.map.add(this.markers);
    }

    // 获取资源地图的信息
    async getMapInfo(data?: any, type?: any) {
        const res = await this.$server["ResourceMap/Info"]({
            data: {
                cityCode: this.userInfo.cityCode,
                maxLatitude: this.maxLatitude,
                maxLongitude: this.maxLongitude,
                minLatitude: this.minLatitude,
                minLongitude: this.minLongitude,
                showLayer: Number(this.showLayer),
                typeFieldList: this.checkList,
                pageSize: this.pageSize,
                ...data
            },
            loader: false
        });
        if (res.data.code === 200) {
            if (res.data.data) {
                this.sumTotal = Number(res.data.data.sumTotal);
                if (type !== "tab") {
                    this.initMarker(res.data.data);
                }
            }
            if (res.data.data && res.data.data.pageData) {
                this.dataList.dataList = res.data.data.pageData.dataList;
                this.dataList.total = res.data.data.pageData.total;
            } else {
                this.dataList.dataList = [];
                this.dataList.total = 0;
                this.tabModle = "typeTree";
            }
        }
    }

    // 跳转到详情页
    handleJump(item: any, type: any) {
        if (type === "1" && this.tabShow === 0) {
            this.typeId = this.tabShowList[0].typeId;
            this.currrentField = this.tabShowList[0].field;
            this.typeFieldName = this.tabShowList[0].name;
        }
        if (type === "2" && this.tab2Show === 0) {
            this.typeId = this.tabShowList[0].typeId;
            this.currrentField = this.tabShowList[0].field;
            this.typeFieldName = this.tabShowList[0].name;
        }
        this.$router.push({
            name: "DataRetrievalDetails",
            query: {
                currentId: this.typeId,
                currentFiled: this.currrentField,
                id: item.dataMap.id,
                title: this.typeFieldName
            }
        });
    }
}
</script>

<style lang="scss" scoped>
::v-deep {
    .el-cascader-menu__wrap {
        max-height: 300px;
    }
    .page-base-body {
        height: calc(100% - 50px) !important;
        background: transparent !important;
        position: relative;
    }
    .mark-item {
        font-size: 14px;
        background: #de2728;
        border-radius: 50%;
        color: #fff;
        width: 72px;
        height: 72px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        word-wrap: break-word;
        word-break: normal;
        text-align: center;
        p {
            margin: 0;
            padding: 0;
        }
    }
    .mark-img {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
            width: 30px;
            height: 30px;
        }
    }
    .item-info {
        display: flex;
        align-items: center;
        background: #de2728;
        border-radius: 32px;
        color: #ffffff;
        font-size: 14px;
        padding: 4px 10px;
        cursor: pointer;
        position: relative;
        span {
            display: inline-block;
            white-space: normal;
            word-break: keep-all;
        }
        &::after {
            content: "";
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid #de2728;
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
        }
        i {
            font-style: normal;
            background-color: #fff;
            border-radius: 14px;
            padding: 0 10px;
            font-size: 14px;
            color: #37383a;
            margin-left: 6px;
        }
    }
    .el-tabs {
        width: 280px;
        border: 0 !important;
        max-height: calc(100% - 20px);
        box-sizing: border-box;
        &.fold {
            .el-tabs__content {
                display: none;
            }
        }
        .el-tabs__nav.is-top {
            width: 100%;
            .el-tabs__item {
                text-align: center;
                box-sizing: border-box;
                margin-left: 0;
                padding: 0 10px !important;
                &:nth-child(1) {
                    width: 100px;
                }
                &:nth-child(2) {
                    width: calc(100% - 98px);
                    font-size: 12px;
                    position: relative;
                    .type {
                        font-size: 14px;
                    }
                    .num {
                        font-style: normal;
                        color: #de2728;
                    }
                    .btn-back {
                        position: absolute;
                        right: 8px;
                        top: 50%;
                        transform: translateY(-50%);
                        font-size: 16px;
                    }
                }
            }
        }
        .el-tabs__item.is-active {
            background: #de2728 !important;
            color: #fff !important;
            .num {
                color: #fff !important;
            }
        }
    }
    .el-tabs__content {
        max-height: calc(100% - 40px);
        overflow-y: auto;
        box-sizing: border-box;
        padding: 0px !important;
    }
}

/deep/.el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    background-color: transparent;
}

.handle {
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    width: 280px;
    height: calc(100% - 120px);
    &.close {
        height: 60px !important;
    }
    .el-tree {
        padding: 15px;
        ::v-deep {
            .el-tree-node__expand-icon {
                padding: 2px;
            }
            .custom-tree-node {
                width: 100%;
                & > div {
                    display: flex;
                    justify-content: space-between;
                    font-size: 14px;
                    width: 100%;
                    img {
                        width: 16px;
                        height: 16px;
                        margin-right: 4px;
                    }
                }
                .defult {
                    width: 16px;
                    height: 16px;
                    background-image: url(~@/assets/icon/noActive.png);
                    background-size: 16px 16px;
                }
                .active {
                    width: 16px;
                    height: 16px;
                    background-image: url(~@/assets/icon/isActive.png);
                    background-size: 16px 16px;
                }

                .is_active {
                    background-color: transparent;
                    color: #de2728;
                }
            }
        }
    }
    .btn {
        text-align: center;
        i {
            display: inline-block;
            width: 80px;
            height: 20px;
            background: rgba(253, 123, 123, 0.39);
            opacity: 1;
            border-radius: 0px 0px 16px 16px;
            color: #ffffff;
            cursor: pointer;
        }
    }
    .sumTotal {
        width: 100%;
        height: 45px;
        background-color: #ffffff;
        display: flex;
        padding-left: 12px;
        align-items: center;
        font-size: 14px;
        color: #37383a;
        margin-top: 10px;
        i {
            color: #de2728;
            font-weight: 400;
            font-style: normal;
        }
    }
}

#container {
    width: 100%;
    height: 100%;
    position: relative;
}

.el-collapse {
    border: none;
    width: 100%;
    height: 100%;
    ::v-deep {
        .el-collapse-item__wrap {
            border: none;
        }
        .el-collapse-item__content {
            padding-bottom: 0;
        }
        .el-collapse-item__header {
            display: none;
        }
        .tab-list {
            display: flex;
            height: 50px;
            align-items: center;
            width: 100%;
            overflow-x: scroll;
            li {
                padding: 0 10px;
                transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
                flex-grow: 0;
                height: 100%;
                display: flex;
                align-items: center;
                span {
                    cursor: pointer;
                    padding-bottom: 2px;
                    white-space: nowrap;
                }
                &.tab-active {
                    span {
                        color: #de2728;
                        border-bottom: 1px solid #de2728;
                    }
                }
            }
        }
        .text {
            display: flex;
            flex-direction: column;
            width: 100%;
            li {
                display: flex;
                align-items: center;
                cursor: pointer;
                border-bottom: 1px solid #f3f3f3;
                padding: 10px;
                &:nth-child(1) {
                    padding-top: 0;
                }
                * {
                    margin: 0;
                    padding: 0;
                }
                .content-right {
                    width: 100%;
                    p:nth-child(1) {
                        font-size: 14px;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #de2728;
                    }
                    p:nth-child(2),
                    p:nth-child(3) {
                        display: flex;
                        span {
                            width: 50%;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            font-size: 14px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            color: #37383a;
                        }
                    }
                }
            }
        }
        .el-pagination {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}
</style>
